<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
 <script src="/spring-merchant/js/bootstrap/jquery-3.2.1.min.js"></script>
    <link rel="stylesheet" href="/spring-merchant/css/bootstrap/bootstrap.min.css" >
    <link rel="stylesheet" href="/spring-merchant/css/bootstrap/bootstrap-theme.min.css">
    <script src="/spring-merchant/js/bootstrap/bootstrap.min.js"></script>
	
	<script src="/spring-merchant/js/dist/sweetalert-dev.js"></script>
    <link href="/spring-merchant/css/dist/sweetalert.css" rel="stylesheet">
    <script src="/spring-merchant/js/dist/sweetalert.min.js"></script>
    <script src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
    <link rel="stylesheet" href="/spring-merchant/css/advertisement.css">
    <script type="text/javascript" src="/spring-merchant/js/websocket.js"></script>
    <style>
         body{
            
        }
        .top-title{
            height: 100px;
            width: 100%;
        }
        .log-div{
            width: 15.7%;
            float: left;
        }
        .title-nav{
            position:relative;
            float: left;
            height: 100px;
            width: 84.3%;
           /* background-color: coral;*/
        }
        .page-header-div{
            float: left;
            text-align: center;
            width: 80%;
            margin: 15px 0px 15px 0px;
            padding: 0px;
            border: 0px;
            /*background-color: darkgray;*/
        }
        .admin-center{
            float: left;
            text-align: center;
            width: 20%;
            margin: 15px 0px 15px 0px;
            padding: 0px;
            border: 0px;
            /*background-color: aqua;*/
        }
        .user-center-btn-group{
            margin-left: 10%;
        }
        .menu-div{
            float: left;
            width: 15.7%;
        }
        .menu-blank-block{
            width: 300px;
            height: 150px;
        }
        .menu-li{
            padding: 20px 0px;
        }
        .operationarea{
            float: left;
            width: 84.3%;
            height: 873px;
            border: 1px solid gray;
        }
        #order-type-choose-nav ul{
            margin-top: 5%;
            margin-left: 15%;
        }
        #order-type-choose-nav ul li{
            width: 17%;
            height: 70px;
            text-align: center;
        }
        #order-detail-div{
            margin: 3% 25% 10% 25%;
        }
        #order-detail-div div{
            margin-top: 0%;
            margin-bottom: 0%;
        }
        .hidden-attr{
            display: none;
        }
    </style>
        
</head>
<body>

<div id="main-div">
   <!-- 上方标题-->
     <div class="top-title">
        <div class="dole-logo log-div">
            <a href="">
                 <img src="/spring-merchant/image/login.jpg" alt="merchant">
            </a>
        </div>
        <div class="title-nav">
            <div class="page-header page-header-div">
                <h1>Order detail<small></small></h1>
            </div>
           	<%@include file="../../user_nav.jsp"%>
        </div>
    </div>
       <!-- 菜单栏-->
    <div class="bottom-menu-operationarea">
        <div id="left-menu-log" class="mac-main-nav menu-div">
    <!--隔离空白区美观-->
         
    <!--选项栏-->
  	<%@include file="../../menu_nav.jsp"%>
        </div>
        <div class="operationarea">
           
            <div id="show-order-detail-area"> 
                <div id="order-detail-div">
                    <!-- 展示顾客信息 -->
                    <div class="panel panel-primary">
                        <div class="panel-heading">Order Info</div>
                        <ul class="list-group" id="order_message">
                        </ul>       
                    </div>
                    <!-- 展示版食物列表-->
                    <div class="panel panel-primary">
                            <!-- Default panel contents -->
                        <div class="panel-heading">Food List</div>
                        <table id="food-list-table" class="table">
                        <tr id="food-list-tr">
                            <td>#</td>
                            <td>Food Name</td>
                            <td>Food Price</td>
                            <td>Food Amount</td>
                        </tr>
                        <c:forEach items="${ orderItemList}" var="item" varStatus="status">
                         <tr id="food-list-tr">
                            <td>${ status.index + 1}</td>
                            <td>${ item.name}</td>
                            <td>${ item.price}</td>
                            <td>${ item.amount}</td>
                             <td>status</td>
                        </tr>
                        </c:forEach>
                        </table>
                    </div>
                    <!-- 展示订单总信息-->
                    <div class="panel panel-primary">
                        <div class="panel-heading">Order Total Money</div>
                        <ul class="list-group">
                            <li class="list-group-item list-group-item-default">${total }</li>
                        </ul>
                    </div>
	                <div class="panel panel-primary">
	                    <div class="panel-heading">Operater Panel</div>
                        <!--挂载订单processnumber-->
                        <div class="list-group" id="process-number-holder">
                            <a href="javascript:void(0);" class="list-group-item list-group-item-default">RECEIVE</a>
                            <a href="javascript:void(0);" class="list-group-item list-group-item-default">REFUSE</a>
                            <a href="javascript:void(0);" class="list-group-item list-group-item-default">DELIVER</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    <script type="text/javascript">
        (function(){
	       var obj={};
	       //用来设置ajax回调函数的上下文。让回调函数中的this指向这个对象。
	       obj.ajax = function(type, url, data, headers, context, callback){
               $.ajax({
                    type: type,
			         url: url,
			         data: JSON.stringify(data),
			         headers: headers,
			         context:context
		          }).done(callback);
	           };
	       window.ajaxRequest = obj;
        })();
        
        function orderListShow(template){
        	this.orderId;
        	this.status;
            this.orderTemplate = template;
            this.orderModel = null;
          
            
            this.changeOrderStatus = function(order_id, actionType){
                /*添加查询操作,根据spring提供的借口做出修改*/
                ajaxRequest.ajax("POST","changeOrderStatus? id="+order_id+"&type="+actionType
                                 ,null,null,this,function(orders){
                	
		     });
            }

            //加上项目名
           	this.findOrder = function(){
           	   ajaxRequest.ajax("GET","/spring-merchant/orders/order?order_processNumber_id=${processNumber}"
                       ,null,null,this,function(order){
           		   $("#order_message").append($("<li>").addClass("list-group-item list-group-item-primary").text("订单号：   "+order.processNumber));
           		   $("#order_message").append($("<li>").addClass("list-group-item list-group-item-primary").text("订单客户：   "+order.customer.name));
           		   $("#order_message").append($("<li>").addClass("list-group-item list-group-item-primary").text("地址：   "+order.deliveryAddress));
           		   $("#order_message").append($("<li>").addClass("list-group-item list-group-item-primary").text("订单日期：   "+order.createDate));
           		   $("#order_message").append($("<li>").addClass("list-group-item list-group-item-primary").text("订单状态：   "+order.status));
           		   orderId = order.id;
           		 	var btn_group = $("#process-number-holder");
           		 	console.log(order.status);
           		 	console.log(btn_group.attr("class"));
         			if("WAIT" == order.status){
             			btn_group.children("a:nth-child(3)").addClass("hidden-attr");
         			}else if("REJECT" == order.status || "DELIVER" == order.status || "SUCCESS" == order.status){
            			 btn_group.children("a").addClass("hidden-attr");
			         }else if("RECEIVE" == order.status){
			        	 console.log("receive");
			             btn_group.children("a:nth-child(1)").addClass("hidden-attr");
			             btn_group.children("a:nth-child(2)").addClass("hidden-attr");
			         }else{
			             btn_group.children("a").addClass("hidden-attr");
			         }
			     });
           	}

            /*绑定修改*/
            function bindmenue_operation(li){
            	li.on("click",function(){
            		ajaxRequest.ajax("PUT","/spring-merchant/orders/"+orderId+"/"+$(this).text(),null,null,this,function(){
            			swal({
            				  title: "success",
            				  html: true,
            				  closeOnConfirm: false,
            				},function(isConfirm){
            					if(isConfirm){}
            			location.reload(true);
            				}
            			);
            				
            		});
            	});
            }
            
            this.bindUpdate = function(data){
            	data.each(function(){
	            	bindmenue_operation($(this));
            	})
            };
            
            /*渲染orderList*/
            function _render_order(status){
                /*绑定订单号*/
                /* orderTemplate.children("div:nth-child(1)")
                    .children("ul").children("li:nth-child(1)").text(data.processNumber); */
                /*绑定顾客名*/
                /* orderTemplate.children("div:nth-child(1)")
                    .children("ul").children("li:nth-child(2)").text(item.customer.name); */
                /*绑定订单时间,需要截取显示的时间段*/
                /* orderTemplate.children("div:nth-child(1)")
                    .children("ul").children("li:nth-child(3)").text(item.createDate.slice(0,5)); */
                /*绑定订单地址*/
                /* orderTemplate.children("div:nth-child(1)")
                    .children("ul").children("li:nth-child(4)").text(item.deliveryAddress); */
                /*绑定订单foodList*/
                /* var aotal_amount = 0;
                var serial_number = 0;
                item.orderItemList.forEach(function(item){
                    serial_number = serial_number + 1;
                    var food_per = $("#food-list-tr").clone();
                    food_per.children("td:nth-child(1)").text(serial_number);
                    food_per.children("td:nth-child(2)").text(item.name);
                    food_per.children("td:nth-child(3)").text(item.price);
                    food_per.children("td:nth-child(4)").text(item.amount);
                    aotal_amount = aotal_amount + item.price*item.amount;
                    $("#food-list-table").append(food_per);
                }); */
                /*订单总金额*/
                /* orderTemplate.children("div:nth-child(3)")
                    .children("ul").children("li:nth-child(1)").text(aotal_amount); */
                /*订单可使用操作按钮*/
                var btn_group = orderTemplate.children("div:nth-child(4)")
                        .children("div:nth-child(2)");
                if("WAIT".equals(status)){
                    btn_group.children("a:nth-child(3)").addClass("hidden");
                }else if("REJECT".equals(status) || "DELIVER".equals(status) || "SUCCESS".equals(status)){
                    btn_group.children("a").addClass("hidden");
                }else if("RECEIVE".equals(status)){
                    btn_group.children("a:not(3)").addClass("hidden");
                }else{
                    btn_group.children("a").addClass("hidden");
                }
                btn_group.children("a").on("click", function(){
                   $(this).addClass("hidden"); 
                });
            }
            
            
        };
        
        $(function(){
            
            var orderShow = new orderListShow($("#order-detail-div"));
            orderShow.findOrder();
            orderShow.bindUpdate($("#process-number-holder a"));
            
            
            /*利用attribute中的id寻找order详情*/
            /*var clone = $("#order-sample").clone();
            clone.children("#order-details-list").children("div:nth-child(4)").children("h3").text("dawduaoiwl");
            clone.children("#order-details-list").children("div:nth-child(5)").children("button#detailBtn").attr("value", "sssss");
            clone.appendTo($("#show-order-area"))*/
            $("li#orderChange").on("click", function(){
                window.location.assign("orderManager.jsp");
            });
        });
    </script>
</body>
</html>